<template>
    <div class="cesium-container">
        <div ref="cesiumContainer" class="map-container"></div>
    </div>
</template>

<!-- 文档 -->
<!-- https://blog.csdn.net/duansamve/article/details/144131806 -->

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import * as Cesium from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css"

// 获取容器引用
const cesiumContainer = ref(null)
// 声明 viewer 变量
let viewer = null

onMounted(() => {
    // 初始化 Cesium 地图
    initCesium()
})

const initCesium = async () => {
    // 确保 Cesium 资源正确加载
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYzg5ODcwYy01NTUwLTQwNmMtODJmYy1iNmNmMzM5NDc3MDkiLCJpZCI6MzM4MTcyLCJpYXQiOjE3NTY5NTc1NTh9.-EbkLiNREwOVuCAMd2G_GTdWxcu-3cyeqylMd0QQgcg'
    viewer = new Cesium.Viewer(cesiumContainer.value, {
        // 配置地图提供商
        // 未联网状态下 默认显示球面地图
        imageryProvider: new Cesium.TileMapServiceImageryProvider({
            url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
        }),

        // 参数设置
        // 隐藏一些默认控件
        orderIndependentTranslucency: false,
        contextOptions: {
            webgl: {
                alpha: true
            }
        },
        animation: false, // 是否显示动画控件
        baseLayerPicker: false, // 是否显示图层选择控件
        vrButton: false, // 是否显示VR控件
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        navigationInstructionsInitiallyVisible: false, // 帮助按钮，初始化的时候是否展开
        infoBox: false, // 是否显示点击要素之后显示的信息
        fullscreenButton: false, // 是否显示全屏按钮
        selectionIndicator: true, // 是否显示选中指示框
        homeButton: false, // 是否显示返回主视角控件
        skyAtmosphere: false, //光圈

        // 显示地形 --------新版本的--------
        terrainProvider: await Cesium.createWorldTerrainAsync({
            url: Cesium.IonResource.fromAssetId(1),  // 官方全球地形数据（AssetId=1）
            // url: 'https://terrain01.geovisearth.com/terrain',
            // 光照阴影
            requestVertexNormals: true,
            // 水流效果
            requestWaterMask: true,
            // 新增：设置最大地形级别（根据需求调整）
            // maximumLevel: 14
        }),
        // 空对象，不显示地形
        // terrainProvider: new Cesium.EllipsoidTerrainProvider({}), 

        // 显示地形
        // 1. 正确配置地形提供者（关键修正）--------这是老版本的--------
        // terrainProvider: new Cesium.CesiumTerrainProvider({  // 注意：Cesium 1.90+版本中正确类名是CesiumTerrainProvider
        //     url: Cesium.IonResource.fromAssetId(1),  // 官方全球地形数据（AssetId=1）
        //     url: 'https://terrain01.geovisearth.com/terrain',
        //     requestVertexNormals: true,  // 支持地形光照阴影
        //     requestWaterMask: true,       // 支持水面效果
        //     // 新增：设置最大地形级别（根据需求调整）
        //     // maximumLevel: 14
        // }),

        // 2. 强制使用3D模式（地形仅在3D下可见） // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        scene3DOnly: true,  // 直接开启3D模式，不允许切换到2D
        // 新增：锁定地形模式为3D
        sceneMode: Cesium.SceneMode.SCENE3D,
    })

    // 3. 开启地形深度检测（避免模型穿透地形）
    viewer.scene.globe.depthTestAgainstTerrain = true;


    viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏官方默认底部动画组件
    // viewer.camera.zoomIn(8000000);  //*定义地球放大
    // viewer.scene.screenSpaceCameraController.enableZoom =false;//禁止缩放

    viewer.scene.globe.enableLighting = true// 地形-必须开启光照效果


    // 地图初始化
    // 安全检查：确保cesiumWidget已初始化
    if (viewer.cesiumWidget) {
        // 合并地形和控件的初始化事件，确保地图完全准备就绪
        const initPromises = [];

        // 添加地形加载Promise（如果存在）
        if (viewer.terrainProvider && viewer.terrainProvider.readyPromise) {
            initPromises.push(viewer.terrainProvider.readyPromise);
        }

        // 添加控件初始化Promise
        if (viewer.cesiumWidget.readyPromise) {
            initPromises.push(viewer.cesiumWidget.readyPromise);
        }

        // 等待所有初始化操作完成
        Promise.all(initPromises)
            .then(() => {
                console.log("地图完全初始化完成（地形+控件均就绪）");
                // 此处可添加地图初始化完成后的操作
            })
            .catch(error => {
                console.error("地图初始化过程中发生错误:", error);
                // 错误恢复机制
                if (!viewer.terrainProvider.ready) {
                    console.log("地形加载失败，切换到基础地形");
                    viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
                }
            });
    } else {
        console.error("cesiumWidget未初始化成功");
        // 更友好的错误提示
        const userConfirmed = confirm("地图加载失败，是否尝试重新加载？");
        if (userConfirmed) {
            window.location.reload();
        }
    }



    // 地图瓦片服务
    // 1. 添加高德底图图层（影像层）
    const baseLayer = new Cesium.UrlTemplateImageryProvider({
        url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
        subdomains: ['1', '2', '3', '4'],
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        maximumLevel: 18,
        credit: "© 高德地图"
    });
    viewer.imageryLayers.addImageryProvider(baseLayer);
    // 2. 添加高德路网标记图层（矢量路网层）
    const roadLayer = new Cesium.UrlTemplateImageryProvider({
        url: "http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
        subdomains: ['1', '2', '3', '4'],
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        maximumLevel: 18,
        credit: "© 高德地图"
    });
    // 添加路网层，并设置透明度（可选）
    const roadImageryLayer = viewer.imageryLayers.addImageryProvider(roadLayer);
    roadImageryLayer.alpha = 0.9; // 0-1之间，控制路网层透明度



    // 监听瓦片加载完成事件
    const helper = new Cesium.EventHelper()
    // 监听地球瓦片加载进度
    const removeCallback = helper.add(
        viewer.scene.globe.tileLoadProgressEvent,
        (progress) => {
            // progress为0表示当前没有正在加载的瓦片（加载完成）
            if (progress === 0) {
                // 延时确保渲染完成
                console.log('瓦片加载完成');

                setTimeout(() => {
                    viewer.camera.flyTo({
                        destination: Cesium.Cartesian3.fromDegrees(87.125, 28.188, 15000), // 坐标（示例）
                        orientation: {
                            heading: Cesium.Math.toRadians(0),
                            pitch: Cesium.Math.toRadians(-45),
                            roll: Cesium.Math.toRadians(0)
                        },
                        complete: () => {
                            // 注意：在script setup中没有this，直接调用函数
                            reverseSelectionMasking() // 加载道路和隧道
                        }
                    })
                }, 100)

                // 移除事件监听（避免重复触发）
                removeCallback()
                // 销毁事件助手（可选）
                // helper.destroy()
            }
        }
    )


    // 设置初始视角 - 例如：北京
    // viewer.camera.setView({
    //     destination: Cesium.Cartesian3.fromDegrees(116.404, 39.915, 15000)
    // })

    // 可以在这里添加更多地图交互逻辑
}


// 组件卸载时销毁地图实例
onUnmounted(() => {
    if (viewer) {
        viewer.destroy()
    }
})


// 定义 reverseSelectionMasking 函数
function reverseSelectionMasking() {
    // TODO: 实现道路和隧道加载逻辑
}
</script>

<style scoped>
.cesium-container {
    width: 100%;
    height: 100%;
}

.map-container {
    width: 100%;
    height: 100vh;
}
</style>
